<template>
  <div style="width: 100%">
    <h1 style="text-align: center; margin: auto; margin-bottom: 10px">
      {{ form.name }}店铺商品管理
    </h1>
    <el-descriptions
      class="margin-top"
      title=""
      :column="5"
      border
      style="margin-bottom: 10px"
    >
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-office-building"></i>
          店铺地址
        </template>
        {{ form.address }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-mobile-phone"></i>
          店铺电话
        </template>
        {{ form.tel }}
      </el-descriptions-item>
      <el-descriptions-item>
        <template slot="label">
          <i class="el-icon-location-outline"></i>
          是否支持配送
        </template>
        {{ form.hasDistribution }}
      </el-descriptions-item>
    </el-descriptions>
    <div style="margin: 30px 0">
      <h2 style="margin: 10px 0">本店已上架商品</h2>
      <el-table :data="StShop" border style="width: 100%">
        <el-table-column prop="type" label="商品类别" width="100" fixed>
        </el-table-column>
        <el-table-column prop="kind" label="商品种类" width="100">
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="200">
        </el-table-column>
        <el-table-column prop="price" label="商品单价" width="100">
        </el-table-column>
        <el-table-column prop="goodsNum" label="剩余库存" width="100">
        </el-table-column>
        <el-table-column prop="producer" label="商品产地" width="100">
        </el-table-column>
        <el-table-column prop="weight" label="商品重量" width="100">
        </el-table-column>
        <el-table-column prop="discount" label="是否是打折商品" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.discount">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="shelfLife" label="保质期" width="100">
        </el-table-column>
        <el-table-column prop="production" label="生产日期" width="100">
        </el-table-column>
        <el-table-column label="操作" width="145" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              round
              icon="el-icon-delete"
              type="danger"
              @click="handleUp(scope.$index, scope.row)"
              >是否下架商品</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-size="20"
        background
        layout="prev, pager, next,total"
        :total="StShop.length"
      >
      </el-pagination>
    </div>
    <div style="margin-top: 10px">
      <h2 style="margin: 10px 0">商品列表</h2>
      <div>
        <el-form
          ref="form"
          :model="form"
          label-width="70px"
          style="display: flex"
        >
          <el-input
            placeholder="请输入商品名称"
            v-model="forms.name"
            clearable
            style="width: 150px; margin-left: 900px"
          >
          </el-input>
          <el-form-item>
            <el-button type="primary" @click="checkDoods">查询商品</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table :data="rows" border style="width: 100%">
        <el-table-column prop="type" label="商品类别" width="100" fixed>
        </el-table-column>
        <el-table-column prop="kind" label="商品种类" width="100">
        </el-table-column>
        <el-table-column prop="name" label="商品名称" width="200">
        </el-table-column>
        <el-table-column prop="price" label="商品单价" width="100">
        </el-table-column>
        <el-table-column prop="goodsNum" label="剩余库存" width="100">
        </el-table-column>
        <el-table-column prop="producer" label="商品产地" width="100">
        </el-table-column>
        <el-table-column prop="weight" label="商品重量" width="100">
        </el-table-column>
        <el-table-column prop="discount" label="是否是打折商品" width="130">
          <template slot-scope="scope">
            <span v-if="scope.row.discount">是</span>
            <span v-else>否</span>
          </template>
        </el-table-column>
        <el-table-column prop="shelfLife" label="保质期" width="100">
        </el-table-column>
        <el-table-column prop="production" label="生产日期" width="100">
        </el-table-column>
        <el-table-column label="操作" width="145" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              round
              icon="el-icon-check"
              type="success"
              @click="handleCheck(scope.row)"
              :disabled="btnBoolean == btnStatus ? true : false"
              >是否上架商品</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @current-change="handleCurrentChange"
        :current-page="curPage"
        :page-size="20"
        background
        layout="prev, pager, next,total"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapActions, mapMutations, mapState } =
  createNamespacedHelpers("stores");
export default {
  data() {
    return {
      form: {
        name: "",
        address: "",
        tel: "",
        business: "",
        time: "",
        status: "",
        hasDistribution: false,
      },
      forms: {
        name: "",
      },
      btnBoolean: Boolean,
      btnStatus: -1,
    };
  },
  computed: mapState([
    "rows",
    "StShop",
    "curPage",
    "maxPage",
    "eachPage",
    "total",
    "StShop",
  ]),
  mounted() {
    const data = localStorage.getItem("StoresShopping");
    this.form = JSON.parse(data);
    this.form.hasDistribution =
      this.form.hasDistribution === "是" ? "支持配送" : "不支持配送";
    this.getStShop(this.form._id);
    this.getGoods();
    // if (this.rows.indexOf(this.StShop._id) > -1) {
    //   this.btnBoolean = 1;
    // } else {
    //   this.btnBoolean = -1;
    // }
  },
  methods: {
    ...mapActions(["getGoods", "getStShop"]),
    ...mapMutations([
      "addStShop",
      "getStShops",
      "updataGoods",
      "serchDoods",
      "deleteStShop",
    ]),
    //查询所有商品
    checkDoods() {
      const serName = this.forms.name;
      this.serchDoods(serName);
    },
    handleCurrentChange(val) {
      this.setCurPage(val);
    },
    //新增店铺商品
    handleCheck(goodsInfo) {
      const bb = this.StShop.every((item) => {
        return item._id.indexOf(goodsInfo._id) === -1;
      });
      if (bb) {
        const storesId = this.form._id;
        const storesShopping = { goodsInfo, storesId };
        this.$confirm("是否上架该商品?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          this.addStShop(storesShopping);
          this.$message({
            type: "success",
            message: "上架成功!",
          });
        });
      } else {
        this.$message.error('错了哦,该商品已经上架');
      }
    },
    //下架店铺商品
    handleUp(index, goodsInfo) {
      const storesId = this.form._id;
      const storesShopping = { index, goodsInfo, storesId };
      this.$confirm("是否下架该商品?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.deleteStShop(storesShopping);
        this.$message({
          type: "success",
          message: "下架成功!",
        });
      });
    },
  },
  watch: {
    curPage() {
      this.get();
      this.getStShop();
    },
  },
};
</script>
<style scoped></style>
